<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>树形控件布局</title>
	<style type="text/css">
		.father{

		}
		.son{
			padding-left: 30px; 
		}
		.g-son{
			padding-left: 60px;
		}
	</style>
</head>
<body>
	<p class="father">一级1</p>
	<p class="son">二级1-1</p>
	<p class="g-son">三级1-1-1</p>
	<p class="g-son">三级1-1-2</p>
	<p class="son">二级1-2</p>
	<p class="g-son">三级1-2-1</p>

	<p class="father">一级2</p>
	<p class="son">二级2-1</p>
	<p class="son">二级2-2</p>

	<p class="father">一级3</p>
	<p class="son">二级3-1</p>
	<p class="son">二级3-2</p>

	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		let data = [
			{
				id: 1,
				label: '一级1',
				children: [
					{
						id: 4,
						label: '二级1-1',
						children: [
							{
								id: 10,
								label: '三级1-1-1'
							},
							{
								id: 11,
								label: '三级1-1-2'
							}
						]
					},
					{
						id: 5,
						label: '二级1-2'
					}
				]
			},
			{
				id: 2,
				label: '一级2',
				children: [
					{
						id: 6,
						label: '二级2-1'
					},
					{
						id: 7,
						label: '二级2-2'
					} 
				]
			},
			{
				id: 3,
				label: '一级3',
				children: [
					{
						id: 8,
						label: '二级3-1'
					},
					{
						id: 9,
						label: '二级3-2'
					}
				]
			}
		];
		console.log(data);
		function renderTree(data){
			
		}
	</script>
</body>
</html>